<template>
  <div id="mapWrap" class="w-100" style="height: 550px"></div>
</template>

<script type="text/ecmascript-6">
  // import AMap from 'AMap'
  import {MP} from 'api/loadMap'
  import api from 'api/api'

  let map,lightOverlayGroups,boxOverlayGroups,wareHouseOverlayGroups=null
  export default {
    components: {},
    props: {
      boxs:{
        type:Array,
        default:function () {
          return []
        }
      },
      box:null,
      pole:null,
      wareHouse:null,//仓库
      iconType:Number//1 控制箱 2灯杆 3窨井 4仓库
    },
    data() {
      return {}
    },
    watch: {},
    computed: {},
    methods: {
      mapInit(){
        let _this=this
        lightOverlayGroups = new AMap.OverlayGroup()
        boxOverlayGroups = new AMap.OverlayGroup()
        wareHouseOverlayGroups = new AMap.OverlayGroup()
        // boxOverlayGroups.clearOverlays()
        // lightOverlayGroups.clearOverlays()
        map = new AMap.Map('mapWrap', {
          viewMode: '2D',
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: 18, //初始化地图层级
          resizeEnable: true,
          expandZoomRange:true,
          pitchEnable: true,
          zooms: [3,20]
        })
        if(this.box&&this.box.Lng&&this.box.Lat){
          map.setCenter(new AMap.LngLat(this.box.Lng, this.box.Lat))
        }
        if(this.iconType==1){//配电柜时
          this.addPoint([this.box],1)
          map.setZoom(18)
        }
        else if(this.iconType==2) {//灯杆
          if(this.box.Id){
            this.addPoint([this.box],1)
            api.fetchSimple('/Monitor/QueryIPoleByBox',{boxId:this.box.Id})
              .then(r => {
                this.addPoint(r.data,2)
              })
          }
          if(this.pole.Id){
            map.setZoomAndCenter(18, new AMap.LngLat(this.pole.Lng,this.pole.Lat))
          }
        } else if(this.iconType==4){//仓库
          if(this.wareHouse.Id){
            this.addPoint([this.wareHouse],4)
            map.setZoomAndCenter(18, new AMap.LngLat(this.wareHouse.Lng,this.wareHouse.Lat))
          }
        }else{
          if(this.box.Id){
            this.addPoint([this.box],1)
          }
          // fetch.queryAllWell()
          //   .then(r=>{
          //     this.addPoint(r.data,3)
          //   })
        }
        map.on('click', function (e) {
          _this.getLngLat(e.lnglat)
        })
      },
      addPoint(devList,type) {
        let icons=['static/image/map/box.png','static/image/map/light.png','static/image/map/mark_bs.png','static/image/map/warehouse1.png']
        let size={1:[32,32],2:[20,20],4:[40,40]}
        //'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        devList.map(r=>{
          let dev = r
          let marker = new AMap.Marker({
            position: new AMap.LngLat(dev.Lng, dev.Lat),
            icon: new AMap.Icon({
              size: new AMap.Size(size[type][0], size[type][1]),
              image: icons[type-1],
              imageSize: new AMap.Size(size[type][0], size[type][1])
            })
          })
          if (type == 1) {
            this.setMarkOptions(marker, dev, 1, dev.No)
            boxOverlayGroups.addOverlay(marker)
          } else if(type==2){
            if (this.pole.No == dev.PoleNo) {
              this.setMarkOptions(marker, dev, 2, dev.PoleNo)
            }
            lightOverlayGroups.addOverlay(marker)
          }else if(type==4){
            this.setMarkOptions(marker, dev, 4, dev.Name)
            wareHouseOverlayGroups.addOverlay(marker)
          }
        })
        map.add(boxOverlayGroups)
        map.add(lightOverlayGroups)
        map.add(wareHouseOverlayGroups)
        this.overlayFun()
      },
      setMarkOptions(marker,dev,type,title){
        marker.setExtData(Object.assign({"devType": type},dev))
        marker.setTitle(title)
        marker.setLabel({
          // offset: new AMap.Pixel(0, 30),
          content: title,
          direction: 'bottom'
        })
      },
      overlayFun(){
        let _this=this
        boxOverlayGroups.on('mouseover', function (evt) {
          if (evt.target.getExtData()['BoxId']==_this.box.BoxId&&_this.iconType == 1) {
            evt.target.setDraggable(true)
          }
        })
        //拖动修改坐标
        boxOverlayGroups.on('dragend', function (evt) {
          if (_this.iconType == 1&&evt.target.getExtData()['BoxId']==_this.box.BoxId) {
            evt.target.setDraggable(false)
            _this.updateGraphic({lng:evt.lnglat.getLng(),lat:evt.lnglat.getLat()})
            // _this.updateGraphic({lng:(evt.lnglat.Q).toFixed(7),lat:(evt.lnglat.P).toFixed(7)})
          }
        })
      },
      updateGraphic(lnglat) {
        api.fetch('/DevRtu/UpdateBox', {Id:this.box.BoxId,Lng:lnglat.lng,Lat:lnglat.lat}).then(r => {})
      },
      getLngLat(v){
        this.$emit('getLngLat',v)
      }
    },
    created() {
    },
    mounted() {
      let that = this
      MP().then(function (AMap) {
        that.mapInit()
      })
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
</style>
